<template>
  <div class="blog-category-container" v-loading="isLoading">
    <h2>文章分类</h2>
    <RightList :list="list" @select="handleClick" />
  </div>
</template>

<script>
import RightList from "../RightList";
import { getBlogTypes } from "@/api";
import fetchData from "@/mixins/fetchData";
export default {
  name: "BlogCategory",
  components: {
    RightList,
  },
  created() {
    console.log(this.$route);
  },
  computed: {
    routeInfo() {
      return {
        categoryId: +this.$route.params.categoryId || -1,
        limit: +this.$route.query.limit || 10,
      };
    },
    list() {
      const totalArticleCount = this.data.reduce(
        (a, b) => a + b.articleCount,
        0
      );
      const result = [
        { name: "全部", id: -1, articleCount: totalArticleCount },
        ...this.data,
      ].map((value) => {
        value.aside = value.articleCount + "篇";
        value.isSelect = value.id == this.routeInfo.categoryId;
        return value;
      });

      return result;
    },
  },
  mixins: [fetchData([])],

  methods: {
    async fetchData() {
      return await getBlogTypes();
    },
    handleClick(newCategory) {
        console.log(newCategory)
      const query = {
        page: 1,
        limit: this.routeInfo.limit || 10,
      };

      //跳转到 当前的分类Id
      if (newCategory.id == -1) {
        this.$router.push({
          name: "blog",
          query,
        });
      } else {
        this.$router.push({
          name: "CategoryBlog",
          query,
          params: {
            categoryId: newCategory.id,
          },
        });
      }
    },
  },
};
</script>

<style scoped lang='less'>
.blog-category-container {
  width: 300px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
  h2 {
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 1em;
    margin: 0;
  }
}
</style>